資料繫結的主題講了好幾天，那麼，就來小試身手一下，透過一個簡單的實作，把這幾天所學到的觀念，試著運用看看。

看看上圖框起來的 input，我們實作的需求如下：

1. 當使用者在關鍵字搜尋這個 input 輸入文字時，要在輸入框的正下方顯示正在輸入的字元數。

2. 當使用者在輸入框按下 esc 鍵時，會清空輸入框的內容。

如果，你也是跟著我從零開始學習 Angular，不妨先給自己十分鐘來思考，如果是你，會怎麼著手呢？

以下，就是我拆解這個實作的思考流程：

首先，我們先做計算字元數的部分，我會先到 AppComponent 新增一個 property，就把它命名為 textLength，然後給它一個值為 0。

接著到 HTML 用文件插值把這個 property 綁定。

然後查看一下網頁畫面。

確實已經把 textLength 這個 property 綁定，並呈現到網頁上了。

接著，我們要新增一個事件，當我們在 input 中按下鍵盤，輸入文字時，會觸發一個方法，這個方法則會幫我們將目前的字數計算出來，並且修改 textLength 的值，所以，我們一樣在 HTML 的 input 標籤上，加上這段程式碼：

(keyup) ="textCounter($event)"

然後到 AppComponent，加入剛才我們已預先命名好的方法 textCounter。

由於我們是輸入鍵盤(keyup)的事件，所以這裡 $event 的型別會是 KeyboardEvent。

我們在 Day 25：開始來學資料繫結：事件繫結（二）使用 $event 參數 時有提到，$event.target 代表的就是我們目前指向的這個 DOM 物件，在這裡就是指 input 這個 DOM，而要取得 input 這個 DOM 的值，通常會使用 $event.target.value，所以我們就來試試看，並試著把結果印出來。

竟然出錯了！我在學習的過程中，觀看 Will 保哥 的 Angular 開發實戰：從零開始 課程，當時的版本還能使用這個寫法，但是現在我們用來開發的 Angular 版本已經是 Angular 12 了，因此目前的版本，這個寫法看來是行不通。

所以，我就試著把 Property 'value' does not exist on type 'EventTarget' 這段內容，直接丟到 Google 去找解法。

果然出現了幾筆結果，這裡，我們就先參考第二筆的繁中資源：[Angular] 解決 Property ‘value’ does not exist on type ‘EventTarget’，來改寫目前的程式碼。

[Angular] 解決 Property ‘value’ does not exist on type ‘EventTarget’ 中提供了三個方法，我們採用了第二個方法，這裡提到了 TypeScript 中的型別斷言，想要了解更多型別斷言的資訊，可以參考一下由 Will 保哥 轉譯成繁體中文的網站：TypeScript 新手指南：型別斷言。

此時，我們到網頁驗證一下，確實可以看到，可以順利的印出 input 這個 DOM 的 value 了。

接著，我們再來改寫一下程式碼，就可以抓取 value 的長度。

由於我們在 HTML 有使用文字插值綁定 textLength 這個 property，透過按下鍵盤，觸發 textCounter 方法，來改寫 textLength 的值，因此，網頁上就正確顯示出目前輸入的字元數了！

以上，我們完成了需求一，下一篇，我們再來實作需求二！

參考來源：

• [Angular] 解決 Property ‘value’ does not exist on type ‘EventTarget’

• stackoverflow：Property 'value' does not exist on type 'EventTarget'

• TypeScript 新手指南：型別斷言